CSS સ્ક્રોલ-ડ્રિવન એનિમેશનમાં નિપુણતા: ટાઇમલાઇન સિંક્રોનાઇઝેશનની ઊંડાણપૂર્વકની સમજ

વર્ષોથી, વેબ પર આકર્ષક, સ્ક્રોલ-લિંક્ડ એનિમેશન બનાવવાનું કામ જાવાસ્ક્રિપ્ટના ક્ષેત્રમાં રહ્યું છે. ડેવલપર્સ લાઇબ્રેરીઓ અને જટિલ `requestAnimationFrame` લૂપ્સ પર આધાર રાખતા હતા, સતત સ્ક્રોલ ઇવેન્ટ્સ સાંભળતા હતા. અસરકારક હોવા છતાં, આ અભિગમ ઘણીવાર પર્ફોર્મન્સની કિંમત સાથે આવે છે, જેનાથી જંક અને ઓછો સરળ અનુભવ થાય છે, ખાસ કરીને ઓછા શક્તિશાળી ઉપકરણો પર. આજે, એક પરિવર્તન આવી રહ્યું છે, જે યુઝર ઇન્ટરફેસ ડિઝાઇનના આ સમગ્ર વર્ગને સીધા બ્રાઉઝરના ઉચ્ચ-પ્રદર્શન રેન્ડરિંગ એન્જિનમાં ખસેડી રહ્યું છે, જેનો શ્રેય CSS સ્ક્રોલ-ડ્રિવન એનિમેશન્સને જાય છે.

આ શક્તિશાળી નવું સ્પેસિફિકેશન આપણને એનિમેશનની પ્રગતિને સીધી રીતે કન્ટેનરની સ્ક્રોલ પોઝિશન અથવા એલિમેન્ટની દૃશ્યતા સાથે લિંક કરવાની મંજૂરી આપે છે. પરિણામ એ સંપૂર્ણપણે સરળ, GPU-એક્સિલરેટેડ એનિમેશન્સ છે જે ઘોષણાત્મક, સુલભ અને નોંધપાત્ર રીતે કાર્યક્ષમ છે. જો કે, સાચી સર્જનાત્મક સંભાવના ત્યારે અનલૉક થાય છે જ્યારે આપણે એકલ એલિમેન્ટ્સને એનિમેટ કરવાથી આગળ વધીને અનેક, જટિલ ક્રિયાપ્રતિક્રિયાઓને સુમેળમાં ગોઠવવાનું શરૂ કરીએ છીએ. આ એનિમેશન સિંક્રોનાઇઝેશનની કળા છે.

આ વ્યાપક માર્ગદર્શિકામાં, આપણે CSS સ્ક્રોલ-ડ્રિવન એનિમેશન ટાઇમલાઇનના મુખ્ય ખ્યાલોનું અન્વેષણ કરીશું અને તેમને સિંક્રનાઇઝ કરવા માટે જરૂરી તકનીકોમાં ઊંડાણપૂર્વક જઈશું. તમે લેયર્ડ પેરેલેક્સ ઇફેક્ટ્સ, ક્રમિક સ્ટોરીટેલિંગ રિવિલ્સ અને જટિલ કમ્પોનન્ટ ઇન્ટરેક્શન્સ બનાવવાનું શીખી શકશો - બધું જ શુદ્ધ CSS સાથે. આપણે આવરી લઈશું:

• scroll() અને view() ટાઇમલાઇન વચ્ચેનો મૂળભૂત તફાવત.
• બહુવિધ એલિમેન્ટ્સને સિંક્રનાઇઝ કરવા માટે નેમ્ડ ટાઇમલાઇનનો ક્રાંતિકારી ખ્યાલ.
• animation-range નો ઉપયોગ કરીને એનિમેશન પ્લેબેક પર ઝીણવટભર્યું નિયંત્રણ.
• વ્યવહારુ, વાસ્તવિક-દુનિયાના ઉદાહરણો કોડ સાથે જેનો તમે આજે ઉપયોગ કરી શકો છો.
• પર્ફોર્મન્સ, ઍક્સેસિબિલિટી અને બ્રાઉઝર સુસંગતતા માટેની શ્રેષ્ઠ પ્રથાઓ.

CSS વડે શું શક્ય છે તે વિશે પુનર્વિચાર કરવા અને તમારા વેબ અનુભવોને ક્રિયાપ્રતિક્રિયા અને પોલિશના નવા સ્તરે લઈ જવા માટે તૈયાર રહો.

પાયો: એનિમેશન ટાઇમલાઇનને સમજવું

આપણે એનિમેશનને સિંક્રનાઇઝ કરી શકીએ તે પહેલાં, આપણે સૌ પ્રથમ તે મિકેનિઝમને સમજવું જોઈએ જે તેમને ચલાવે છે. પરંપરાગત રીતે, CSS એનિમેશનની ટાઇમલાઇન સમયના પસાર થવા પર આધારિત હોય છે, જેમ કે તેના `animation-duration` દ્વારા વ્યાખ્યાયિત કરવામાં આવે છે. સ્ક્રોલ-ડ્રિવન એનિમેશન સાથે, આપણે સમય સાથેના આ જોડાણને તોડીએ છીએ અને તેના બદલે એનિમેશનની પ્રગતિને નવા સ્ત્રોત સાથે જોડીએ છીએ: એક પ્રોગ્રેસ ટાઇમલાઇન.

આ મુખ્યત્વે `animation-timeline` પ્રોપર્ટી દ્વારા પ્રાપ્ત થાય છે. એનિમેશનને ટ્રિગર થયા પછી તેને જાતે ચાલવા દેવાને બદલે, આ પ્રોપર્ટી બ્રાઉઝરને ઉલ્લેખિત ટાઇમલાઇનની પ્રગતિના આધારે એનિમેશનના કીફ્રેમ્સ દ્વારા સ્ક્રબ કરવાનું કહે છે. જ્યારે ટાઇમલાઇન 0% પર હોય, ત્યારે એનિમેશન તેના 0% કીફ્રેમ પર હોય છે. જ્યારે ટાઇમલાઇન 50% પર હોય, ત્યારે એનિમેશન તેના 50% કીફ્રેમ પર હોય છે, અને તે જ રીતે.

CSS સ્પેસિફિકેશન આ પ્રોગ્રેસ ટાઇમલાઇન બનાવવા માટે બે મુખ્ય ફંક્શન્સ પ્રદાન કરે છે:

1. `scroll()`: એક અનામી ટાઇમલાઇન બનાવે છે જે સ્ક્રોલિંગ કન્ટેનર (સ્ક્રોલર) ની સ્ક્રોલ પ્રગતિને ટ્રેક કરે છે.
2. `view()`: એક અનામી ટાઇમલાઇન બનાવે છે જે વ્યુપોર્ટ (અથવા કોઈપણ સ્ક્રોલર) માંથી પસાર થતાં ચોક્કસ એલિમેન્ટની દૃશ્યતાને ટ્રેક કરે છે.

ચાલો એક મજબૂત પાયો બનાવવા માટે આમાંના દરેકની વિગતવાર તપાસ કરીએ.

ઊંડાણપૂર્વક સમજ: `scroll()` પ્રોગ્રેસ ટાઇમલાઇન

`scroll()` શું છે?

`scroll()` ફંક્શન એવા એનિમેશન માટે આદર્શ છે જે પૃષ્ઠની અથવા ચોક્કસ સ્ક્રોલ કરી શકાય તેવા એલિમેન્ટની એકંદર સ્ક્રોલિંગ પ્રગતિને અનુરૂપ હોવા જોઈએ. એક ઉત્તમ ઉદાહરણ એ લેખની ટોચ પર એક રીડિંગ પ્રોગ્રેસ બાર છે જે વપરાશકર્તા પૃષ્ઠને નીચે સ્ક્રોલ કરે તેમ ભરાય છે.

તે માપે છે કે વપરાશકર્તાએ સ્ક્રોલર દ્વારા કેટલું સ્ક્રોલ કર્યું છે. ડિફૉલ્ટ રૂપે, તે સમગ્ર દસ્તાવેજની સ્ક્રોલ સ્થિતિને ટ્રેક કરે છે, પરંતુ તેને પૃષ્ઠ પરના કોઈપણ સ્ક્રોલ કરી શકાય તેવા કન્ટેનરને ટ્રેક કરવા માટે ગોઠવી શકાય છે.

સિન્ટેક્સ અને પેરામીટર્સ

`scroll()` ફંક્શન માટેનું મૂળભૂત સિન્ટેક્સ નીચે મુજબ છે:

animation-timeline: scroll(<scroller> <axis>);

ચાલો તેના પેરામીટર્સને સમજીએ:

• `<scroller>` (વૈકલ્પિક): આ સ્પષ્ટ કરે છે કે કયા સ્ક્રોલ કન્ટેનરની પ્રગતિ ટ્રેક કરવી જોઈએ.
  • root: ડિફૉલ્ટ મૂલ્ય. તે દસ્તાવેજના વ્યુપોર્ટ સ્ક્રોલર (મુખ્ય પૃષ્ઠ સ્ક્રોલબાર) નું પ્રતિનિધિત્વ કરે છે.
  • self: એલિમેન્ટની પોતાની સ્ક્રોલ સ્થિતિને ટ્રેક કરે છે, ધારીને કે તે સ્ક્રોલ કન્ટેનર છે (દા.ત., `overflow: scroll` ધરાવે છે).
  • nearest: નજીકના પૂર્વજ સ્ક્રોલ કન્ટેનરની સ્ક્રોલ સ્થિતિને ટ્રેક કરે છે.
• `<axis>` (વૈકલ્પિક): આ ટ્રેક કરવા માટે સ્ક્રોલ એક્સિસને વ્યાખ્યાયિત કરે છે.
  • block: ડિફૉલ્ટ મૂલ્ય. બ્લોક એક્સિસ (અંગ્રેજી જેવી હોરિઝોન્ટલ લેખન પદ્ધતિઓ માટે વર્ટિકલ) સાથે પ્રગતિને ટ્રેક કરે છે.
  • inline: ઇનલાઇન એક્સિસ (અંગ્રેજી માટે હોરિઝોન્ટલ) સાથે પ્રગતિને ટ્રેક કરે છે.
  • y: વર્ટિકલ એક્સિસ માટે એક સ્પષ્ટ ઉપનામ.
  • x: હોરિઝોન્ટલ એક્સિસ માટે એક સ્પષ્ટ ઉપનામ.

વ્યવહારુ ઉદાહરણ: પેજ સ્ક્રોલ પ્રોગ્રેસ બાર

ચાલો તે ક્લાસિક રીડિંગ પ્રોગ્રેસ ઇન્ડિકેટર બનાવીએ. તે તેના સરળ સ્વરૂપમાં `scroll()` નું એક સંપૂર્ણ પ્રદર્શન છે.

HTML માળખું:

            <div class="progress-bar"></div>
<article>
  <h1>A Long Article Title</h1>
  <p>... a lot of content here ...</p>
  <p>... more content to make the page scrollable ...</p>
</article>
            

              
                Copy
              
            
          

CSS અમલીકરણ:

            /* Define the keyframes for the progress bar */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Style the progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: dodgerblue;
  transform-origin: left; /* Animate scale from the left side */

  /* Link the animation to the scroll timeline */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

/* Basic body styling for demonstration */
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 2rem;
  height: 300vh; /* Ensure there is plenty to scroll */
}
            

              
                Copy
              
            
          

સમજૂતી:

1. આપણે એક સરળ `grow-progress` એનિમેશન વ્યાખ્યાયિત કરીએ છીએ જે એક એલિમેન્ટને આડા 0 થી 1 સુધી સ્કેલ કરે છે.
2. `.progress-bar` વ્યુપોર્ટની ટોચ પર ફિક્સ થયેલ છે.
3. જાદુ છેલ્લી બે પ્રોપર્ટીઝ સાથે થાય છે. આપણે `grow-progress` એનિમેશન લાગુ કરીએ છીએ. નિર્ણાયક રીતે, તેને સમયગાળો (જેમ કે `1s`) આપવાને બદલે, આપણે તેની `animation-timeline` ને `scroll(root block)` પર સેટ કરીએ છીએ.
4. આ બ્રાઉઝરને કહે છે: "આ એનિમેશન સમય જતાં ન ચલાવો. તેના બદલે, વપરાશકર્તા રૂટ ડોક્યુમેન્ટને વર્ટિકલી (`block` એક્સિસ) સ્ક્રોલ કરે તેમ તેના કીફ્રેમ્સ દ્વારા સ્ક્રબ કરો."

જ્યારે વપરાશકર્તા પૃષ્ઠની બરાબર ટોચ પર હોય છે (0% સ્ક્રોલ પ્રગતિ), બારનું `scaleX` 0 હશે. જ્યારે તેઓ બરાબર તળિયે હોય છે (100% સ્ક્રોલ પ્રગતિ), તેનું `scaleX` 1 હશે. પરિણામ એ કોઈ પણ જાવાસ્ક્રિપ્ટ વિના એક સંપૂર્ણપણે સરળ પ્રગતિ સૂચક છે.

નજીકની શક્તિ: `view()` પ્રોગ્રેસ ટાઇમલાઇન

`view()` શું છે?

જ્યારે `scroll()` કન્ટેનરની એકંદર પ્રગતિ વિશે છે, `view()` એક સ્ક્રોલરના દૃશ્યમાન વિસ્તારમાં એકલ એલિમેન્ટની મુસાફરી વિશે છે. તે અત્યંત સામાન્ય "રિવિલ પર એનિમેટ" પેટર્ન માટેનું નેટિવ CSS સોલ્યુશન છે, જ્યાં એલિમેન્ટ્સ ફેડ ઇન થાય છે, સ્લાઇડ અપ થાય છે, અથવા અન્યથા સ્ક્રીન પર પ્રવેશતા જ એનિમેટ થાય છે.

`view()` ટાઇમલાઇન ત્યારે શરૂ થાય છે જ્યારે કોઈ એલિમેન્ટ પ્રથમ સ્ક્રોલપોર્ટમાં દૃશ્યમાન બને છે અને ત્યારે સમાપ્ત થાય છે જ્યારે તે દૃશ્યમાંથી સંપૂર્ણપણે પસાર થઈ જાય છે. આ આપણને 0% થી 100% સુધીની ટાઇમલાઇન આપે છે જે સીધી રીતે એલિમેન્ટની દૃશ્યતા સાથે જોડાયેલી હોય છે, જે તેને રિવિલ ઇફેક્ટ્સ માટે અત્યંત સાહજિક બનાવે છે.

સિન્ટેક્સ અને પેરામીટર્સ

`view()` માટે સિન્ટેક્સ થોડો અલગ છે:

animation-timeline: view(<axis> <view-timeline-inset>);

• `<axis>` (વૈકલ્પિક): `scroll()` (`block`, `inline`, `y`, `x`) ની જેમ જ. તે નક્કી કરે છે કે સ્ક્રોલપોર્ટના કયા એક્સિસ સામે એલિમેન્ટની દૃશ્યતા ટ્રેક કરવામાં આવે છે.
• `<view-timeline-inset>` (વૈકલ્પિક): આ એક શક્તિશાળી પેરામીટર છે જે તમને "સક્રિય" વ્યુપોર્ટની સીમાઓને સમાયોજિત કરવા દે છે. તે એક અથવા બે મૂલ્યો સ્વીકારી શકે છે (અનુક્રમે શરૂઆત અને અંતના ઇન્સેટ માટે). તમે ટકાવારી અથવા નિશ્ચિત લંબાઈનો ઉપયોગ કરી શકો છો. ઉદાહરણ તરીકે, `100px 20%` નો અર્થ છે કે ટાઇમલાઇન વ્યુપોર્ટને ટોચથી 100px થી શરૂ કરીને અને તળિયેથી 20% પર સમાપ્ત થતું માને છે. આ એનિમેશન ક્યારે શરૂ થાય અને સમાપ્ત થાય છે તે સ્ક્રીન પર એલિમેન્ટની સ્થિતિના સંબંધમાં ફાઇન-ટ્યુનિંગની મંજૂરી આપે છે.

વ્યવહારુ ઉદાહરણ: રિવિલ પર ફેડ-ઇન

ચાલો એક ક્લાસિક ઇફેક્ટ બનાવીએ જ્યાં કન્ટેન્ટ કાર્ડ્સ સ્ક્રીન પર સ્ક્રોલ થતાં જ ફેડ અને સ્લાઇડ થઈને દૃશ્યમાન થાય છે.

HTML માળખું:

            <section class="content-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</section>
            

              
                Copy
              
            
          

CSS અમલીકરણ:

            /* Define keyframes for the reveal animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  /* Apply the animation to each card */
  animation: fade-in-up linear;
  animation-timeline: view(); /* This is it! */

  /* Other styling */
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 8px;
  min-height: 200px;
  display: grid;
  place-content: center;
  font-size: 2rem;
}

/* Layout styling */
.content-grid {
  display: grid;
  gap: 2rem;
  padding: 10vh 2rem;
}
            

              
                Copy
              
            
          

સમજૂતી:

1. `fade-in-up` કીફ્રેમ્સ આપણે જે એનિમેશન જોઈએ છે તેને વ્યાખ્યાયિત કરે છે: પારદર્શક અને સહેજ નીચેથી શરૂ કરો, અપારદર્શક અને તેની અંતિમ સ્થિતિમાં સમાપ્ત કરો.
2. દરેક `.card` એલિમેન્ટ પર આ એનિમેશન લાગુ પડે છે.
3. નિર્ણાયક લાઇન છે `animation-timeline: view();`. આ દરેક કાર્ડ માટે એક અનન્ય, અનામી ટાઇમલાઇન બનાવે છે.
4. દરેક વ્યક્તિગત કાર્ડ માટે, તેનું એનિમેશન 0% પર હશે જ્યારે તે વ્યુપોર્ટમાં પ્રવેશવાનું શરૂ કરશે અને 100% પર પહોંચશે જ્યારે તે વ્યુપોર્ટ છોડવાનું સમાપ્ત કરશે.

જેમ જેમ તમે પૃષ્ઠ નીચે સ્ક્રોલ કરશો, તેમ દરેક કાર્ડ બરાબર દૃશ્યમાન થતાં જ સરળતાથી તેની જગ્યાએ એનિમેટ થશે. આ ફક્ત CSS ની બે લાઇનથી પ્રાપ્ત થાય છે, એક સિદ્ધિ કે જેના માટે અગાઉ જાવાસ્ક્રિપ્ટ ઇન્ટરસેક્શન ઓબ્ઝર્વર અને સાવચેત સ્ટેટ મેનેજમેન્ટની જરૂર પડતી હતી.

મુખ્ય વિષય: એનિમેશન સિંક્રોનાઇઝેશન

અલગ-અલગ ઇફેક્ટ્સ માટે અનામી `scroll()` અને `view()` ટાઇમલાઇનનો ઉપયોગ કરવો શક્તિશાળી છે. પરંતુ જો આપણે બહુવિધ એલિમેન્ટ્સને એક જ ટાઇમલાઇન પર પ્રતિક્રિયા આપવા માંગતા હોઈએ તો? એક પેરેલેક્સ ઇફેક્ટની કલ્પના કરો જ્યાં બેકગ્રાઉન્ડ ઇમેજ, ટાઇટલ અને ફોરગ્રાઉન્ડ એલિમેન્ટ બધા અલગ-અલગ ઝડપે ફરે છે પરંતુ બધા એક જ સ્ક્રોલ ક્રિયા દ્વારા સંચાલિત છે. અથવા ઉત્પાદનની છબી જે તમે તેની સુવિધાઓની સૂચિ ભૂતકાળમાં સ્ક્રોલ કરો ત્યારે રૂપાંતરિત થાય છે.

આ તે છે જ્યાં સિંક્રોનાઇઝેશન આવે છે, અને ચાવી એ અનામી ટાઇમલાઇનથી નેમ્ડ ટાઇમલાઇન તરફ જવાની છે.

શા માટે સિંક્રનાઇઝ કરવું?

સિંક્રોનાઇઝેશન સમૃદ્ધ, કથા-સંચાલિત અનુભવો બનાવવાની મંજૂરી આપે છે. સ્વતંત્ર એનિમેશનના સંગ્રહને બદલે, તમે એક સુસંગત દ્રશ્ય બનાવી શકો છો જે વપરાશકર્તા સ્ક્રોલ કરે તેમ વિકસિત થાય છે. આ આના માટે આવશ્યક છે:

• જટિલ પેરેલેક્સ ઇફેક્ટ્સ: એક જ સ્ક્રોલ ટ્રિગરના સંબંધમાં વિવિધ સ્તરોને જુદી જુદી ઝડપે ખસેડીને ઊંડાણની ભાવના બનાવવી.
• સંકલિત કમ્પોનન્ટ સ્ટેટ્સ: જટિલ UI કમ્પોનન્ટના જુદા જુદા ભાગોને એક સાથે એનિમેટ કરવું કારણ કે તે દૃશ્યમાં સ્ક્રોલ થાય છે.
• વિઝ્યુઅલ સ્ટોરીટેલિંગ: વપરાશકર્તાને કથા દ્વારા માર્ગદર્શન આપવા માટે કાળજીપૂર્વક કોરિયોગ્રાફ કરેલા ક્રમમાં એલિમેન્ટ્સને પ્રગટ કરવું અને રૂપાંતરિત કરવું.

તકનીક: શેર્ડ નેમ્ડ ટાઇમલાઇન્સ

સિંક્રોનાઇઝેશન માટેની પદ્ધતિમાં ત્રણ નવી CSS પ્રોપર્ટીઝ શામેલ છે:

1. `timeline-scope`: કન્ટેનર એલિમેન્ટ પર લાગુ. તે એક સ્કોપ સ્થાપિત કરે છે જેમાં તેની અંદર વ્યાખ્યાયિત નેમ્ડ ટાઇમલાઇન્સ અન્ય એલિમેન્ટ્સ દ્વારા શોધી શકાય છે.
2. `scroll-timeline-name` / `view-timeline-name`: ટાઇમલાઇન બનાવવા અને નામ આપવા માટે એલિમેન્ટ પર લાગુ. નામ ડૅશ-આઇડેન્ટ હોવું જોઈએ (દા.ત., `--my-timeline`). આ એલિમેન્ટની સ્ક્રોલ પ્રગતિ (`scroll-timeline-name`) અથવા દૃશ્યતા (`view-timeline-name`) નેમ્ડ ટાઇમલાઇન માટેનો સ્ત્રોત બને છે.
3. `animation-timeline`: આપણે આ પહેલાં જોયું છે, પરંતુ હવે, `scroll()` અથવા `view()` નો ઉપયોગ કરવાને બદલે, આપણે તેને આપણી શેર્ડ ટાઇમલાઇનનું ડૅશ-આઇડેન્ટ નામ આપીએ છીએ (દા.ત., `animation-timeline: --my-timeline;`).

પ્રક્રિયા નીચે મુજબ છે: 1. એક પૂર્વજ એલિમેન્ટ `timeline-scope` વ્યાખ્યાયિત કરે છે. 2. વંશજ એલિમેન્ટ `view-timeline-name` અથવા `scroll-timeline-name` નો ઉપયોગ કરીને ટાઇમલાઇનને વ્યાખ્યાયિત કરે છે અને નામ આપે છે. 3. કોઈપણ અન્ય વંશજ એલિમેન્ટ તે જ ટાઇમલાઇનમાં હૂક કરવા માટે તેની `animation-timeline` પ્રોપર્ટીમાં તે નામનો ઉપયોગ કરી શકે છે.

વ્યવહારુ ઉદાહરણ: મલ્ટિ-લેયર્ડ પેરેલેક્સ સીન

ચાલો એક ક્લાસિક પેરેલેક્સ હેડર બનાવીએ જ્યાં બેકગ્રાઉન્ડ ઇમેજ પૃષ્ઠ કરતાં ધીમી સ્ક્રોલ થાય છે, અને ટાઇટલ ઝડપથી ફેડ આઉટ થાય છે.

HTML માળખું:

            <div class="parallax-container">
  <div class="parallax-background"></div>
  <h1 class="parallax-title">Synchronized Motion</h1>
</div>
<div class="content">
  <p>... main page content ...</p>
</div>
            

              
                Copy
              
            
          

CSS અમલીકરણ:

            /* 1. Define a scope for our named timeline */
.parallax-container {
  timeline-scope: --parallax-scene;
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 2. Define the timeline itself using the container's visibility */
/* The container's journey through the viewport will drive the animations */
.parallax-container {
  view-timeline-name: --parallax-scene;
}

/* 3. Define the keyframes for each layer */
@keyframes move-background {
  to {
    transform: translateY(30vh); /* Moves slower */
  }
}

@keyframes fade-title {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* 4. Style the layers and hook them to the named timeline */
.parallax-background {
  position: absolute;
  inset: -30vh 0 0 0; /* Extra height to allow for movement */
  background: url('https://picsum.photos/1600/1200') no-repeat center center/cover;
  z-index: -1;

  /* Attach to the shared timeline */
  animation: move-background linear;
  animation-timeline: --parallax-scene;
}

.parallax-title {
  color: white;
  font-size: 5rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);

  /* Attach to the same shared timeline */
  animation: fade-title linear;
  animation-timeline: --parallax-scene;
}

            

              
                Copy
              
            
          

સમજૂતી:

1. `.parallax-container` `--parallax-scene` નામના `timeline-scope` ની સ્થાપના કરે છે. આ નામ તેના બાળકો માટે ઉપલબ્ધ બનાવે છે.
2. પછી આપણે એ જ એલિમેન્ટમાં `view-timeline-name: --parallax-scene;` ઉમેરીએ છીએ. આનો અર્થ એ છે કે `--parallax-scene` નામની ટાઇમલાઇન `.parallax-container` ની પોતાની દૃશ્યતા પર આધારિત `view()` ટાઇમલાઇન હશે.
3. આપણે બે અલગ-અલગ એનિમેશન બનાવીએ છીએ: સૂક્ષ્મ વર્ટિકલ શિફ્ટ માટે `move-background` અને ફેડ-અને-સ્કેલ ઇફેક્ટ માટે `fade-title`.
4. નિર્ણાયક રીતે, `.parallax-background` અને `.parallax-title` બંનેની `animation-timeline` પ્રોપર્ટી `--parallax-scene` પર સેટ છે.

હવે, જેમ જેમ `.parallax-container` વ્યુપોર્ટ દ્વારા સ્ક્રોલ કરે છે, તે એક જ પ્રગતિ મૂલ્ય ઉત્પન્ન કરે છે. બેકગ્રાઉન્ડ અને ટાઇટલ બંને તેમના સંબંધિત એનિમેશનને ચલાવવા માટે આ સમાન મૂલ્યનો ઉપયોગ કરે છે. ભલે તેમના કીફ્રેમ્સ સંપૂર્ણપણે અલગ હોય, તેમનું પ્લેબેક સંપૂર્ણપણે સિંક્રનાઇઝ્ડ છે, જે એક સુસંગત અને પ્રભાવશાળી વિઝ્યુઅલ ઇફેક્ટ બનાવે છે.

`animation-range` સાથે ઉન્નત સિંક્રોનાઇઝેશન

નેમ્ડ ટાઇમલાઇન્સ એનિમેશનને એક સાથે ચલાવવા માટે અદ્ભુત છે. પરંતુ જો તમે તેમને ક્રમમાં ચલાવવા માંગતા હો અથવા એક એનિમેશનને બીજા એલિમેન્ટની દૃશ્યતાના ચોક્કસ ભાગ દરમિયાન જ ટ્રિગર કરવા માંગતા હો તો શું? આ તે છે જ્યાં `animation-range` પ્રોપર્ટી કુટુંબ શક્તિશાળી નિયંત્રણનું બીજું સ્તર પ્રદાન કરે છે.

0% થી 100% થી આગળ

ડિફૉલ્ટ રૂપે, એક એનિમેશન તેની ટાઇમલાઇનની સમગ્ર અવધિ સાથે મેપ થયેલ હોય છે. `animation-range` તમને ટાઇમલાઇનના ચોક્કસ પ્રારંભ અને અંત બિંદુઓને વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે જે તમારા એનિમેશનના કીફ્રેમ્સના 0% અને 100% બિંદુઓને અનુરૂપ હોવા જોઈએ.

આ તમને આવી વસ્તુઓ કહેવા દે છે, "આ એનિમેશન શરૂ કરો જ્યારે એલિમેન્ટ સ્ક્રીનના 20% માં પ્રવેશે, અને તેને 50% ના ચિહ્ન સુધી પહોંચે ત્યાં સુધીમાં સમાપ્ત કરો."

`animation-range` મૂલ્યોને સમજવું

સિન્ટેક્સ `animation-range-start` અને `animation-range-end`, અથવા શોર્ટકટ `animation-range` છે.

animation-range: <start-range> <end-range>;

મૂલ્યો વિશિષ્ટ કીવર્ડ્સ અને ટકાવારીનું સંયોજન હોઈ શકે છે. `view()` ટાઇમલાઇન માટે, સૌથી સામાન્ય કીવર્ડ્સ છે:

• entry: જે ક્ષણે એલિમેન્ટનો બોર્ડર બોક્સ સ્ક્રોલપોર્ટના અંતિમ કિનારાને પાર કરે છે.
• exit: જે ક્ષણે એલિમેન્ટનો બોર્ડર બોક્સ સ્ક્રોલપોર્ટના પ્રારંભિક કિનારાને પાર કરે છે.
• cover: એલિમેન્ટ સ્ક્રોલપોર્ટને આવરી લે છે તે સમગ્ર સમયગાળાને વિસ્તરે છે, જે ક્ષણે તે તેને સંપૂર્ણપણે આવરી લે છે ત્યાંથી તે બંધ થાય ત્યાં સુધી.
• contain: તે સમયગાળાને વિસ્તરે છે જ્યાં એલિમેન્ટ સ્ક્રોલપોર્ટમાં સંપૂર્ણપણે સમાયેલું હોય છે.

તમે આમાં ટકાવારી ઓફસેટ્સ પણ ઉમેરી શકો છો, જેમ કે `entry 0%` (ડિફૉલ્ટ પ્રારંભ), `entry 100%` (જ્યારે એલિમેન્ટનો નીચેનો કિનારો વ્યુપોર્ટના નીચેના કિનારાને મળે છે), `exit 0%`, અને `exit 100%`.

વ્યવહારુ ઉદાહરણ: એક ક્રમિક સ્ટોરીટેલિંગ સીન

ચાલો એક ફિચર લિસ્ટ બનાવીએ જ્યાં દરેક આઇટમ તમે તેને સ્ક્રોલ કરો ત્યારે હાઇલાઇટ થાય છે, સંપૂર્ણ સંકલન માટે એક જ શેર્ડ ટાઇમલાઇનનો ઉપયોગ કરીને.

HTML માળખું:

            <div class="feature-list-container">
  <div class="feature-list-timeline-marker"></div>
  <div class="feature-item">
    <h3>Feature One: Global Reach</h3>
    <p>Our services are available worldwide.</p>
  </div>
  <div class="feature-item">
    <h3>Feature Two: Unbeatable Speed</h3>
    <p>Experience next-generation performance.</p>
  </div>
  <div class="feature-item">
    <h3>Feature Three: Ironclad Security</h3>
    <p>Your data is always protected.</p>
  </div>
</div>
            

              
                Copy
              
            
          

CSS અમલીકરણ:

            /* Define the scope on the main container */
.feature-list-container {
  timeline-scope: --feature-list;
  position: relative;
  padding: 50vh 0; /* Give space for scrolling */
}

/* Use a dedicated empty div to define the timeline's source */
.feature-list-timeline-marker {
  view-timeline-name: --feature-list;
  position: absolute;
  inset: 0;
}

/* Keyframes for highlighting an item */
@keyframes highlight-feature {
  to { 
    background-color: lightgoldenrodyellow;
    transform: scale(1.02);
  }
}

.feature-item {
  width: 80%;
  margin: 5rem auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;

  /* Attach animation and the shared timeline */
  animation: highlight-feature linear both;
  animation-timeline: --feature-list;
}

/* The magic of animation-range for sequencing */
.feature-item:nth-of-type(1) {
  animation-range: entry 5% entry 40%;
}

.feature-item:nth-of-type(2) {
  animation-range: entry 35% entry 70%;
}

.feature-item:nth-of-type(3) {
  animation-range: entry 65% entry 100%;
}

            

              
                Copy
              
            
          

સમજૂતી:

1. આપણે `--feature-list` સ્કોપ સ્થાપિત કરીએ છીએ અને એક નેમ્ડ `view()` ટાઇમલાઇન બનાવીએ છીએ જે ખાલી માર્કર div સાથે જોડાયેલી છે જે સમગ્ર કન્ટેનરને વિસ્તરે છે. આ એકલ ટાઇમલાઇન સમગ્ર ફિચર વિભાગની દૃશ્યતાને ટ્રેક કરે છે.
2. દરેક `.feature-item` આ જ `--feature-list` ટાઇમલાઇન સાથે જોડાયેલું છે અને તેને સમાન `highlight-feature` એનિમેશન આપવામાં આવ્યું છે.
3. નિર્ણાયક ભાગ `animation-range` છે. તેના વિના, કન્ટેનર સ્ક્રોલ થતાં જ ત્રણેય વસ્તુઓ એક સાથે હાઇલાઇટ થશે.
4. તેના બદલે, આપણે જુદી જુદી રેન્જ સોંપીએ છીએ:
   • પ્રથમ આઇટમ ટાઇમલાઇનની પ્રગતિના 5% અને 40% ની વચ્ચે એનિમેટ થાય છે.
   • બીજી આઇટમ 35% થી 70% વિંડો દરમિયાન એનિમેટ થાય છે.
   • ત્રીજી 65% થી 100% સુધી એનિમેટ થાય છે.

આ એક આનંદદાયક ક્રમિક અસર બનાવે છે. જેમ જેમ તમે સ્ક્રોલ કરો છો, તેમ પ્રથમ સુવિધા હાઇલાઇટ થાય છે. જેમ જેમ તમે સ્ક્રોલ કરવાનું ચાલુ રાખો છો, તેમ તે પાછું ફેડ થાય છે જ્યારે બીજું હાઇલાઇટ થાય છે, અને તે જ રીતે. ઓવરલેપિંગ રેન્જ (`entry 40%` અને `entry 35%`) એક સરળ હેન્ડ-ઓફ બનાવે છે. આ ઉન્નત સિક્વન્સિંગ અને સિંક્રોનાઇઝેશન ફક્ત થોડીક ઘોષણાત્મક CSS લાઇનથી પ્રાપ્ત થાય છે.

પર્ફોર્મન્સ અને શ્રેષ્ઠ પ્રથાઓ

જ્યારે CSS સ્ક્રોલ-ડ્રિવન એનિમેશન અત્યંત શક્તિશાળી છે, ત્યારે તેનો જવાબદારીપૂર્વક ઉપયોગ કરવો મહત્વપૂર્ણ છે. વૈશ્વિક પ્રેક્ષકો માટે અહીં કેટલીક મુખ્ય શ્રેષ્ઠ પ્રથાઓ છે.

પર્ફોર્મન્સનો ફાયદો

આ ટેકનોલોજીનો પ્રાથમિક ફાયદો પર્ફોર્મન્સ છે. જાવાસ્ક્રિપ્ટ-આધારિત સ્ક્રોલ લિસનર્સથી વિપરીત જે મુખ્ય થ્રેડ પર ચાલે છે અને અન્ય કાર્યો દ્વારા અવરોધિત થઈ શકે છે, CSS સ્ક્રોલ-ડ્રિવન એનિમેશન કમ્પોઝિટર થ્રેડ પર ચાલે છે. આનો અર્થ એ છે કે જ્યારે મુખ્ય થ્રેડ વ્યસ્ત હોય ત્યારે પણ તે રેશમ જેવું સરળ રહે છે. આ લાભને મહત્તમ કરવા માટે, એનિમેટીંગ પ્રોપર્ટીઝને વળગી રહો જે કમ્પોઝિટ કરવા માટે સસ્તી હોય, મુખ્યત્વે `transform` અને `opacity`.

ઍક્સેસિબિલિટી વિચારણાઓ

દરેક જણ વેબ પૃષ્ઠો પર ગતિ ઇચ્છતા નથી અથવા સહન કરી શકતા નથી. વપરાશકર્તાની પસંદગીઓનો આદર કરવો મહત્વપૂર્ણ છે. જે વપરાશકર્તાઓએ તેમની ઓપરેટિંગ સિસ્ટમમાં આ સેટિંગ સક્ષમ કર્યું છે તેમના માટે તમારા એનિમેશનને અક્ષમ કરવા અથવા ઘટાડવા માટે `prefers-reduced-motion` મીડિયા ક્વેરીનો ઉપયોગ કરો.

            @media (prefers-reduced-motion: reduce) {
  .card,
  .parallax-background,
  .parallax-title,
  .feature-item {
    /* Disable the animations */
    animation: none;
    /* Ensure elements are in their final, visible state */
    opacity: 1;
    transform: none;
  }
}

            

              
                Copy
              
            
          

બ્રાઉઝર સપોર્ટ અને ફોલબેક્સ

2023 ના અંત સુધીમાં, CSS સ્ક્રોલ-ડ્રિવન એનિમેશન ક્રોમિયમ-આધારિત બ્રાઉઝર્સ (ક્રોમ, એજ) માં સપોર્ટેડ છે અને ફાયરફોક્સ અને સફારીમાં સક્રિય વિકાસ હેઠળ છે. વૈશ્વિક પ્રેક્ષકો માટે, તમારે એવા બ્રાઉઝર્સને ધ્યાનમાં લેવા જોઈએ જે હજી સુધી આ સુવિધાને સપોર્ટ કરતા નથી. એનિમેશનને ફક્ત ત્યાં જ લાગુ કરવા માટે `@supports` એટ-રૂલનો ઉપયોગ કરો જ્યાં તે સપોર્ટેડ છે.

            /* Default state for non-supporting browsers */
.card {
  opacity: 1;
  transform: translateY(0);
}

/* Apply animations only in supporting browsers */
@supports (animation-timeline: view()) {
  .card {
    opacity: 0; /* Initial state for animation */
    transform: translateY(50px);
    animation: fade-in-up linear;
    animation-timeline: view();
  }
}

            

              
                Copy
              
            
          

આ પ્રગતિશીલ ઉન્નતીકરણ અભિગમ બધા વપરાશકર્તાઓ માટે કાર્યાત્મક અનુભવ સુનિશ્ચિત કરે છે, આધુનિક બ્રાઉઝર્સ પરના લોકો માટે ઉન્નત, એનિમેટેડ અનુભવ સાથે.

ડિબગીંગ ટિપ્સ

આધુનિક બ્રાઉઝર ડેવલપર ટૂલ્સ સ્ક્રોલ-ડ્રિવન એનિમેશનને ડિબગ કરવા માટે સપોર્ટ ઉમેરી રહ્યા છે. ક્રોમ ડેવટૂલ્સમાં, ઉદાહરણ તરીકે, તમે એક એલિમેન્ટનું નિરીક્ષણ કરી શકો છો અને "Animations" પેનલમાં એક નવો વિભાગ શોધી શકો છો જે તમને ટાઇમલાઇનની પ્રગતિ જોવા અને તેને જાતે સ્ક્રબ કરવાની મંજૂરી આપે છે, જે તમારા `animation-range` મૂલ્યોને ફાઇન-ટ્યુન કરવાનું વધુ સરળ બનાવે છે.

નિષ્કર્ષ: ભવિષ્ય સ્ક્રોલ-ડ્રિવન છે

CSS સ્ક્રોલ-ડ્રિવન એનિમેશન, અને ખાસ કરીને તેમને નેમ્ડ ટાઇમલાઇન્સ સાથે સિંક્રનાઇઝ કરવાની ક્ષમતા, વેબ ડિઝાઇન અને ડેવલપમેન્ટ માટે એક મોટી છલાંગનું પ્રતિનિધિત્વ કરે છે. અમે અનિવાર્ય, ઘણીવાર નાજુક જાવાસ્ક્રિપ્ટ સોલ્યુશન્સથી ઘોષણાત્મક, પર્ફોર્મન્ટ અને સુલભ CSS-નેટિવ અભિગમ તરફ આગળ વધ્યા છીએ.

અમે `scroll()` અને `view()` ટાઇમલાઇનના મૂળભૂત ખ્યાલોનું અન્વેષણ કર્યું છે, જે અનુક્રમે પેજ-સ્તર અને એલિમેન્ટ-સ્તરની પ્રગતિને સંભાળે છે. વધુ અગત્યનું, અમે `timeline-scope` અને `view-timeline-name` સાથે શેર્ડ, નેમ્ડ ટાઇમલાઇન્સ બનાવીને સિંક્રોનાઇઝેશનની શક્તિને અનલૉક કરી છે. આ અમને પેરેલેક્સ સીન્સ જેવી જટિલ, સંકલિત વિઝ્યુઅલ કથાઓ બનાવવાની મંજૂરી આપે છે. છેલ્લે, `animation-range` સાથે, અમે એનિમેશનને ક્રમબદ્ધ કરવા અને જટિલ, ઓવરલેપિંગ ક્રિયાપ્રતિક્રિયાઓ બનાવવા માટે દાણાદાર નિયંત્રણ મેળવ્યું છે.

આ તકનીકોમાં નિપુણતા મેળવીને, તમે હવે ફક્ત વેબ પૃષ્ઠો બનાવી રહ્યા નથી; તમે ગતિશીલ, આકર્ષક અને પર્ફોર્મન્ટ ડિજિટલ વાર્તાઓ ઘડી રહ્યા છો. જેમ જેમ બ્રાઉઝર સપોર્ટ વિસ્તરતો રહેશે, તેમ તેમ આ સાધનો દરેક ફ્રન્ટ-એન્ડ ડેવલપરના ટૂલકિટનો આવશ્યક ભાગ બનશે. વેબ ઇન્ટરેક્શનનું ભવિષ્ય અહીં છે, અને તે સ્ક્રોલબાર દ્વારા સંચાલિત છે.